<!-- 
/* ************************************************************************
 *                        _oo0oo_
 *                       o8888888o
 *                       88" . "88
 *                       (| -_- |)
 *                       0\  =  /0
 *                     ___/`---'\___
 *                   .' \\|     |// '.
 *                  / \\|||  :  |||// \
 *                 / _||||| -:- |||||- \
 *                |   | \\\  - /// |   |
 *                | \_|  ''\---/''  |_/ |
 *                \  .-\__  '-'  ___/-. /
 *              ___'. .'  /--.--\  `. .'___
 *           ."" '<  `.___\_<|>_/___.' >' "".
 *          | | :  `- \`.;`\ _ /`;.`/ - ` : | |
 *          \  \ `_.   \_ __\ /__ _/   .-` /  /
 *      =====`-.____`.___ \_____/___.-`___.-'=====
 *                        `=---='
 * 
 * 
 ************************************************************************
 *		本代码已经过佛祖开光处理，佛祖保佑，永不宕机，永无BUG。
 *		文件名称：略
 *		简要描述：邀请组件 
 *		作   者：Frank
 *		创建日期：2023/08/28
 *		联系方式：邮箱: goodboybbc@outlook.com, 微信：goodboybbc 可提供后台源码(Node.js开发)和数据库(MySQL)

 *		Copyright(c)	2023-2033   Frank   本项目已取得软件著作权和备案，仅供学习研究。软件著作权登记号：软著登字第12572259号 备案号:川公网安备51012202001748 蜀ICP备2024058077号-1 
 ********************************修改记录********************************
		作	者			修改日期				修改内容 
		Frank			2023/08/28			创建文件
 *************************************************************************/	
 -->
<template>
	<view class="invite">
		<view class="bg"></view>
		<view class="dialog">
			<view class="dialog-title">
				<text> 邀请码</text>
				<image class="dialog-title-close"  @tap="onBtnClose" src="../../static/img/common/close.png"></image>
			</view>
			<view class="dialog-content"> 
				<view class="dialog-content-my">
					<view class="dialog-content-my-lable">我的邀请码:</view>
					<view class="dialog-content-my-no">{{inviteNo}}</view>
					<view class="dialog-btn" @tap="onCopy">点击复制</view>
				</view>
				<view class="dialog-content-tips">
					(每邀请1人必得冲刺卡一张)
				</view>
				<view class="dialog-content-list">
					<view class="dialog-content-list-label">我的邀请列表:</view>
					<scroll-view scroll-y="true" class="dialog-content-list-scroll">
						<view class="scroll-item" v-for="(item,index) in inviteList" :key="index">
							<view class="scroll-item-head">
								<image class="scroll-item-head-avatar" :src="item.avatar" mode=""></image>
							</view>
							<view class="scroll-item-name">{{item.nickName}}</view>	
						</view>
					</scroll-view>
				</view>
				<view class="dialog-content-inviter">
					<view class="dialog-content-inviter-lable">我的邀请人:</view>
					<template v-if="isInputMeNo">
						<input type="number" class='dialog-content-inviter-no' v-model="inviteMeNo" placeholder="他的邀请码"/>
						<view class="dialog-btn" @tap="onSure">确定</view>
					</template>
					<template v-else>
						<view class='dialog-content-inviter-no'>{{inviteMeNo}}</view>
					</template>
				</view>
				<view class="dialog-content-inviter">
					<view class="dialog-content-inviter-lable">邀请方式:</view>
					<view class="dialog-btn-invite" @tap="onSaveImage">保存图片</view>
					<view class="dialog-btn-invite" @tap="onInvite">微信邀请</view>
				</view>
				<view class="invite-tips">
					(好友完成安装后，让好友在上面输入我的邀请码，自己重新登陆后既可获得冲刺卡。)
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import $http from '@/common/api/request.js'
	import utility from '@/common/utility.js'
	import { mapStores, mapActions, mapState } from 'pinia'
	import { userStore } from '@/store/modules/userStore.js'	
	export default {
		data() {
			return {
					inviteNo:0,
					inviteMeNo:'',
					inviteList:[
						{id:1, avatar:'../../static/avatar/1.jpg', nickName:'西门吹雪'},
						{id:1, avatar:'../../static/avatar/1.jpg', nickName:'西门吹雪'},
						{id:1, avatar:'../../static/avatar/1.jpg', nickName:'西门吹雪'}
					]
			}
		},
		computed:{
			...mapStores(userStore),
			isInputMeNo(){
				return this.userStore.user.inviter <= 0;
			}
		},
		props:{
			data:Object
		},
		methods: {
			onBtnClose(){
				this.data.cbClose();
			},
			onCopy(){
				uni.setClipboardData({
					data:this.inviteNo,
					success: () => {
						uni.showToast({
							title:'复制成功'
						})
					}
				})
			},
			onSure(){
				$http.request({
					url:'mixed/set_inviter',
					token:true,
					data:{
						inviter:this.inviteMeNo
					}
				}).then( res => {
					this.userStore.user.inviter = res.data.inviter;
					this.inviteMeNo = this.userStore.user.inviter;
					uni.showToast({
						title:'填写成功',
						icon:'none'
					})
				}).catch( (e) => {
					uni.showToast({
						title:e,
						icon:'none'
					})
				});					
			},
			onSaveImage(){
				this.saveImg();
			},
			onInvite(){
				let downUrl = utility.baseWeb + 'web/down.html';
				let imageUrl = utility.baseWeb + 'web/wx_share.png';
				uni.share({
					provider: "weixin",
					scene: "WXSceneSession",
					type: 0,
					title:"最近超火的福利兑换APP",
					summary: "最新款iPhone,智能手表, 电视,洗衣机等众多奖品等你兑换，快来免费下载体验吧！",
					imageUrl,
					href:downUrl,
					success: res => {
						
					},
					fail: err=> {
						console.log('share error', err)
					}
				});
			},

			//点击保存
			saveImg() {
			  this.downLoadImg();
			},
			downLoadImg(){
			  //下载图片资源至本地，返回文件的本地临时路径
			  uni.downloadFile({
				url:utility.baseWeb + 'web/invite.png',
				success: (res) =>{
				  if (res.statusCode === 200){
					//保存图片至相册
					uni.saveImageToPhotosAlbum({
					  filePath: res.tempFilePath,
					  success: function() {
						uni.showToast({
						  title: "保存成功，快去分享给好友吧。",
						  icon: "none"
						});
					  },
					  fail: function() {
						uni.showToast({
						  title: "保存失败，请稍后重试",
						  icon: "none"
						});
					  }
					});
				  }
				}
			  })
			}		
		},
		mounted() {
			this.inviteNo = this.userStore.user.id;
			if(this.userStore.user.inviter > 0){
				this.inviteMeNo = this.userStore.user.inviter;
			}
			this.inviteList = [];
			let list = [];
			if(this.userStore.user.invite_list && this.userStore.user.invite_list.length > 0){
				list = JSON.parse(this.userStore.user.invite_list);
			}
			
			for(let i = 0; i < list.length; i++){
				let item = list[i];
				item.avatar = `../../static/avatar/${list[i].avatar}.jpg`;
				this.inviteList.push(item);
			}			
		}
	}
</script>

<style scoped>
	.invite{
		width: 100vw;
		height: 100vh;
		position: fixed;
		left:0;
		top:0;
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 1000;
	}
	.bg{
		position: absolute;
		left:0;
		top:0;
		width: 100%;
		height: 100%;
		background-color: black;
		opacity: 0.5;
	}
	.dialog{
		width: 700rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		background-color: white;
		border-radius: 35rpx;
		text-align: center;
		z-index: 1001;
	}
	.dialog-title{
		width: 100%;
		height: 80rpx;
		background-image: url('../../static/img/common/title_bar.png');
		background-size: 100% 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		color:white;
		font-size: 48rpx;
		font-weight: bold;
		position: relative;
		left: 0;
		top: 0;
	}
	.dialog-title-close{
		width: 38rpx;
		height: 38rpx;
		position: absolute;
		right: 20rpx;
		top: 20rpx;
	}
	.dialog-content{
		width: 100%;
		font-size: 32rpx;
		color: black;
		padding: 32rpx;
		white-space: nowrap;
	}
	.dialog-btn{
		width: 194rpx;
		height: 62rpx;
		background-image: url('../../static/img/common/btn/5.png');
		background-size: 100% 100%;
		font-size: 32rpx;
		color: white;
		font-weight: bold;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.dialog-content-my{
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.dialog-content-my-lable{
		padding-right: 16rpx;
	}
	.dialog-content-my-no{
		color: red;
		font-size: 56rpx;
		font-weight: bold;
	}
	.dialog-content-list{
		padding: 16rpx 0;
		display: flex;
	}
	.dialog-content-list-label{
		text-align: left;
		padding-right: 16rpx;
	}
	.dialog-content-list-scroll{
		height: 400rpx;
		border:solid 2rpx black;
		padding: 16rpx;
		border-radius: 20rpx;
	}
	.scroll-item{
		display: flex;
		justify-content:space-between;
		align-items: center;	
		padding: 8rpx;
	}
	.scroll-item-head{
		width: 100rpx;
		height: 100rpx;
	}
	.scroll-item-head-avatar{
		width: 100%;
		height: 100%;
		border: 6rpx solid #F7F3E3;
		border-radius: 50%;
	}
	.scroll-item-name{
		overflow: hidden;
		white-space: nowrap;
	}
	.dialog-content-inviter{
		display: flex;
		align-items: center;
	}
	.dialog-content-inviter-lable{
		padding-right: 16rpx;
	}
	.dialog-content-inviter-no{
		background-color: #F6F6F6;
		border-radius: 20rpx;
		height: 80rpx;
		font-size: 36rpx;
		padding-left: 16rpx;
		flex:1;
		display: flex;
		align-items: center;
	}
	.dialog-content-tips{
		padding: 16rpx;
		display: flex;
		font-size: 44rpx;
		color: red;
		font-weight: bold;
	}
	
	.dialog-btn-invite{
		margin: 20rpx ;
		width: 360rpx;
		height: 88rpx;
		background-image: url('../../static/img/common/btn/8.png');
		background-size: 100% 100%;
		font-size: 36rpx;
		color: white;
		font-weight: bold;
		display: flex;
		justify-content: center;
		align-items: center;		
	}
	.invite-tips{
		display: flex;
		font-size: 32rpx;
		color: red;
		font-weight: bold;
		white-space: normal;
	}
</style>